<template>
  <h2 v-if="title" class="text-xl font-semibold mb-4">{{ title }}</h2>
  <div class="apps-grid-container">
    <!-- 设置div，用gridStyle来确定这个div包含的for循环出来的div的展示效果
     在方法体中gridStyle绑定'grid-template-columns'属性创建网格布局 -->
    <div ref="gridContainer" class="url-grid" :style="gridStyle">
      <!-- 遍历urlList，生成对应个数的url的APP -->
      <div v-for="(item, index) in urlList" :key="index" class="url-item" @click="chooseApp(item)"
        @app-selected="handleAppSelected">
        <div class="url-btn">
          <span>{{ item.name }}</span>
          <i v-if="item.icon" :class="item.icon" class="ml-2"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

export default {
  name: 'AppsButton',
  props: {
    urlList: {
      type: Array,
      required: true,
      default: () => []
    },
    title: {
      type: String,
      default: 'APP'
    },
    // 定义每行最多放入几个图标，默认5个
    maxColumns: {
      type: Number,
      default: 5
    }
  },
  // 为了调用emit事件,定义方法
  methods: {
    // todo:后续改造成vue3的语法糖形式,整体更简洁
    // 定义点击事件chooseApp,点击后,将item的信息传到app.vue中
    // 在app.vue中进行appquery.vue的参数传递
    chooseApp(item) {
      this.$emit('app-selected', item)
    }
  },
  setup(props) {
    // 在app.vue中异步调用后端,获取urls,对应生成apps的个数

    // 1、设定图标每行有几列做展示
    // 定义创建响应式引用gridContainer
    const gridContainer = ref(null)
    // 定义原始值，设定为1列
    const columns = ref(1)
    // 计算列数
    const calculateColumns = () => {
      if (!gridContainer.value) return
      // 获取容器div的宽度
      const containerWidth = gridContainer.value.offsetWidth
      const minItemWidth = 150 // 每个按钮最小宽度
      // 取值，根据宽度除法得出每行有几列，跟maxColumns做比较，取小
      const calculatedColumns = Math.min(
        Math.floor(containerWidth / minItemWidth),
        props.maxColumns
      )
      // 默认1列，如果宽度足够就取大
      columns.value = Math.max(1, calculatedColumns)
    }
    // 根据gridStyle，将对应div中的样式重载出来
    // 计算属性，有值变化的时候才会重新加载，设定网格样式
    console.log("计算后的列数量为" + columns.value);
    const gridStyle = computed(() => ({
      // repeat(${columns.value} 重新刷新样式，${columns.value}确定有几列
      // minmax(0, 1fr))确保列宽至少为 0（避免收缩），同时最大宽度由 1fr 控制（保持等宽特性）
      'grid-template-columns': `repeat(${columns.value}, minmax(0, 1fr))`
    }))

    // 2、点击图标，展开对应的页面
    // 页面对应的是appquery.vue
    // 定义emit事件app-selected,传输item的值到父层级app.vue
    // const emit = defineEmits(['app-selected']);
    // const chooseApp = (item) => {
    //   emit('app-selected', item)
    // }

    // 3、初始化并监听窗口大小变化，适配动态调整
    onMounted(() => {
      calculateColumns()
      // 如果浏览器窗口大小发生变化，即'resize'事件，触发calculateColumns，重新计算列
      window.addEventListener('resize', calculateColumns)
    })
    // 组件卸载前移除'resize'事件监听器，确保使用相同的函数引用才能正常移除监听
    onBeforeUnmount(() => {
      window.removeEventListener('resize', calculateColumns)
    })

    return {
      gridContainer,
      gridStyle,
      // chooseApp
    }
  }
}
</script>

<style scoped>
.apps-grid-container {
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  padding-right: 2%;
}

.url-grid {
  display: grid;
  gap: 1rem;
  transition: grid-template-columns 0.3s ease;
}

.url-item {
  min-width: 180px;
  cursor: pointer;
  transition: transform 0.2s;
}

.url-item:hover {
  transform: translateY(-2px);
}

.url-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.url-btn:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.url-btn i {
  margin-right: 0.5rem;
}

@media (max-width: 640px) {
  .url-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
</style>
